<template>
  <div class="indexClas">
    <div class="itemClass" v-for="(item, index) in classList" :key="index">
      <img :src="item.img" alt="" />
      <p class="des">{{ item.name }}</p>
      <p class="pic">￥{{ item.pic }}</p>
      <div class="bottom">
        <span class="spn1" v-if="item.direct === 1" >自营</span>
        <span class="spn2" v-if="item.direct === 2">京东物流</span>
        <span v-if="item.comment">{{ item.comment }}</span>
        <span class="lastSpn">找相似</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    classList: {
      type: Array,
    },
  },
};
</script>

<style scoped lang='scss'>
.indexClas {
  display: flex;
  flex-wrap: wrap;
  .itemClass {
    width: 48%;
    height: 1100px;
    // background: #ccc;
    margin-right: 20px;
    .des {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding:0 30px;
    }
    .pic{
        color: red;
    }
    img {
      width: 100%;
      height: 500px;
    }
    .bottom{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding:0 30px;
        .spn1{
            width: 120px;
            background: red;
            color: white;
            border-radius: 10px;
        }
        .spn2{
            border-radius: 20px;
            color: red;
            background: #FFF0F0;
        }
        .lastSpn{
            background: #f2f2f2;
           border-radius: 20px;
        }
    }
  }
}
</style>